<template>
    <view class="apply-pages" v-if="isLoad">
        <!-- <back></back> -->
        <view class="page-height" v-if="channel_status != -1">
            <abnor
                percent="150%"
                @confirm="confirm"
                @cancel="confirm"
                :title="title[channel_status]"
                :tip="tipArr[channel_status]"
                :button="buttonArr[channel_status]"
                :image="image[channel_status]"
                :tipMax="channel_status == 4 ? '690rpx' : ''"
            ></abnor>
        </view>
        <block v-else>
            <view class="apply-form">
                <view class="fill-base mt-md radius-16">
                    <view class="flex-between pl-lg pr-lg b-1px-b">
                        <view class="item-text">您的姓名</view>
                        <input
                            v-model="form.user_name"
                            type="text"
                            class="item-input flex-1"
                            maxlength="20"
                            :placeholder="rule[0].errorMsg"
                        />
                    </view>
                    <view class="flex-between pl-lg pr-lg b-1px-b">
                        <view class="item-text">手机号码</view>
                        <input
                            v-model="form.mobile"
                            type="text"
                            class="item-input flex-1"
                            :placeholder="rule[1].errorMsg"
                        />
                    </view>
                    <view class="flex-between pl-lg pr-lg b-1px-b">
                        <view class="item-text">申请渠道</view>
                        <view class="item-input flex-1 text">
                            <picker
                                @change="pickerChange($event)"
                                :value="channelInd"
                                :range="channelList"
                                range-key="title"
                            >
                                <view class="flex-between" style="color: #a9a9a9">
                                    {{
                                        channelInd != -1 && channelList.length > 0
                                            ? channelList[channelInd].title
                                            : "请选择您能接入的渠道"
                                    }}
                                    <i
                                        class="iconfont icon-right ml-sm"
                                        style="font-size: 28rpx"
                                    ></i>
                                </view>
                            </picker>
                        </view>
                    </view>
                </view>
                <view class="fill-base mt-md radius-16">
                    <view class="flex-between pl-lg pr-lg">
                        <view class="item-text">备注信息</view>
                        <input :disabled="true" type="text" class="item-input flex-1" />
                    </view>
                    <textarea
                        v-model="form.text"
                        class="item-textarea pd-lg"
                        maxlength="300"
                        placeholder="输入备注信息"
                    />
                    <view class="text-right pb-lg pr-lg">
                        {{ form.text.length > 300 ? 300 : form.text.length }}/300
                    </view>
                </view>
            </view>

            <view class="space-max-footer"></view>

            <fix-bottom-button
                @confirm="submit"
                :text="[{ text: '确定申请', type: 'confirm', isAuth: true }]"
                bgColor="#fff"
            >
            </fix-bottom-button>
        </block>
    </view>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
export default {
    components: {},
    data() {
        return {
            // -1未申请，1审核中，2审核通过，3取消授权，4审核失败(可再次申请)
            tipArr: {
                1: [
                    {
                        text: "您已经成功提交申请",
                        color: 0,
                    },
                    {
                        text: "审核将在3个工作日内出结果，请耐心等待",
                        color: 0,
                    },
                ],
                2: [
                    {
                        text: "恭喜您，审核通过！",
                        color: 0,
                    },
                    {
                        text: "您已具备渠道商资格，快去分享体验吧~",
                        color: 0,
                    },
                ],
                3: [
                    {
                        text: "请联系平台管理人员询问原因",
                        color: 0,
                    },
                ],
                4: [
                    {
                        text: "请联系平台管理人员询问失败原因",
                        color: 0,
                    },
                ],
            },
            buttonArr: {
                1: [
                    {
                        text: "个人中心",
                        type: "cancel",
                    },
                ],
                2: [
                    {
                        text: "去分享",
                        type: "confirm",
                    },
                ],
                3: [
                    {
                        text: "个人中心",
                        type: "cancel",
                    },
                ],
                4: [
                    {
                        text: "个人中心",
                        type: "cancel",
                    },
                ],
            },
            title: {
                "-1": "申请渠道商",
                1: "等待审核",
                2: "",
                3: "取消授权",
                4: "申请失败",
            },
            image: {
                1: "https://lbqny.migugu.com/admin/public/apply_wait.jpg",
                2: "https://lbqny.migugu.com/admin/public/apply_suc.jpg",
                3: "https://lbqny.migugu.com/admin/public/apply_fail.jpg",
                4: "https://lbqny.migugu.com/admin/public/apply_fail.jpg",
            },
            channel_status: -1,
            channelInd: -1,
            channelList: [],
            isLoad: false,
            options: {},
            form: {
                id: 0,
                user_name: "", //姓名
                mobile: "", //手机号
                cate_id: "", // 渠道
                text: "",
            },
            rule: [
                {
                    name: "user_name",
                    checkType: "isNotNull",
                    errorMsg: "请输入您的真实姓名",
                    regType: 2,
                },
                {
                    name: "mobile",
                    checkType: "isMobile",
                    errorMsg: "请输入常用手机号码",
                },
                {
                    name: "cate_id",
                    checkType: "isNotNull",
                    errorMsg: "请选择您能接入的渠道",
                },
            ],
            lockTap: false,
        };
    },
    computed: mapState({
        primaryColor: (state) => state.config.configInfo.primaryColor,
        subColor: (state) => state.config.configInfo.subColor,
        configInfo: (state) => state.config.configInfo,
        userInfo: (state) => state.user.userInfo,
        location: (state) => state.user.location,
    }),
    async onLoad(options) {
        this.$util.showLoading();
        this.options = options;
        await this.initIndex();
        this.isLoad = true;
    },
    methods: {
        ...mapActions(["getConfigInfo", "getUserInfo"]),
        ...mapMutations(["updateUserItem"]),
        async initIndex(refresh = false) {
            // #ifdef H5
            if (!refresh && this.$jweixin.isWechat()) {
                await this.$jweixin.initJssdk();
                this.$jweixin.wxReady(() => {
                    this.$jweixin.hideOptionMenu();
                });
            }
            // #endif
            if (!this.configInfo.id || refresh) {
                await this.getConfigInfo();
            }
            let [list, data] = await Promise.all([
                this.$api.channel.channelCateSelect(),
                this.$api.channel.channelInfo(),
            ]);
            this.$util.setNavigationBarColor({
                bg: this.primaryColor,
            });
            this.channelList = list;
            if (!data.id) {
                this.$util.hideAll();
                return;
            }
            for (let key in this.form) {
                this.form[key] = data[key];
            }
            this.channel_status = data.status;
            if (data.status == 4 && data.sh_text) {
                this.tipArr[4][0].text = data.sh_text;
            }
            uni.setNavigationBarTitle({
                title: this.title[data.status],
            });
            this.$util.hideAll();
        },
        initRefresh() {
            this.initIndex(true);
        },
        pickerChange(e, val) {
            this.channelInd = e.target.value;
            this.form.cate_id = this.channelList[this.channelInd].id;
        },
        // 个人中心/去分享
        async confirm() {
            let { channel_status } = this;
            let url = channel_status == 2 ? `/user/pages/channel/income` : `/pages/mine`;
            this.$util.log(url);
            this.$util.goUrl({
                url,
                openType: `reLaunch`,
            });
        },
        //表单验证
        validate(param) {
            let validate = new this.$util.Validate();
            this.rule.map((item) => {
                let { name } = item;
                validate.add(param[name], item);
            });
            let message = validate.start();
            return message;
        },
        async submit() {
            let param = this.$util.deepCopy(this.form);
            let msg = this.validate(param);
            if (msg) {
                this.$util.showToast({
                    title: msg,
                });
                return;
            }

            let { admin_id = 0, salesman_id = 0 } = this.options;
            param.admin_id = admin_id;
            param.salesman_id = salesman_id;
            if (this.lockTap) return;
            this.lockTap = true;
            param.text = param.text.length > 300 ? param.text.substring(0, 300) : param.text;

            this.$util.showLoading();
            try {
                await this.$api.channel.applyChannel(param);
                this.$util.hideAll();
                this.$util.showToast({
                    title: `提交成功`,
                });
                setTimeout(() => {
                    this.$util.back();
                    this.$util.goUrl({
                        url: "/user/pages/apply-result?type=3",
                        openType: `redirectTo`,
                    });
                }, 1000);
            } catch (e) {
                setTimeout(() => {
                    this.lockTap = false;
                    this.$util.hideAll();
                }, 2000);
            }
        },
    },
};
</script>

<style lang="scss"></style>
